<template>
  <a-modal
    v-model:open="visible"
    title="用户信息"
    :footer="null"
    width="400px"
    @cancel="handleClose"
  >
    <div class="user-info-content" v-if="user">
      <div class="user-avatar-section">
        <a-avatar :src="user.userAvatar" :size="80">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </div>
      
      <div class="user-details">
        <div class="user-item">
          <label>用户名：</label>
          <span>{{ user.userName || '未设置' }}</span>
        </div>
        
        <div class="user-item">
          <label>账号：</label>
          <span>{{ user.userAccount }}</span>
        </div>
        
        <div class="user-item" v-if="user.userProfile">
          <label>简介：</label>
          <span>{{ user.userProfile }}</span>
        </div>
        
        <div class="user-item" v-if="user.createTime">
          <label>注册时间：</label>
          <span>{{ formatTime(user.createTime) }}</span>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'

interface Props {
  user?: API.UserBasicVO | null
  open?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  user: null,
  open: false,
})

const emit = defineEmits<{
  'update:open': [value: boolean]
}>()

const visible = ref(false)

// 监听外部传入的open状态
watch(() => props.open, (newVal) => {
  visible.value = newVal
})

// 监听内部visible状态变化
watch(visible, (newVal) => {
  emit('update:open', newVal)
})

const handleClose = () => {
  visible.value = false
}

// 格式化时间
const formatTime = (timeStr?: string) => {
  if (!timeStr) return ''
  return new Date(timeStr).toLocaleString('zh-CN')
}
</script>

<style scoped>
.user-info-content {
  text-align: center;
}

.user-avatar-section {
  margin-bottom: 24px;
}

.user-details {
  text-align: left;
}

.user-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.user-item label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
  flex-shrink: 0;
}

.user-item span {
  color: #333;
  word-break: break-all;
}

.user-item:last-child {
  margin-bottom: 0;
}
</style>